{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SAMS console</title>
    <link rel="stylesheet" href="{% static 'alice/css/bootstrap-datetimepicker.min.css' %}">
    <link rel="stylesheet" href="{% static 'alice/css/bootstrap.min.css' %}">
    <style>
        body *{
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div style="height:150px;width:100%;border:3px solid #000000;padding:10px 30px 10px 30px">
        <h1>SAMS console</h1>
        <p style="margin:0"> Welcome, <span style="color: red"> {% firstof user.first_name user.username %} </span>! </p>
        <a href="/alice/signout/"> Sign out</a>
    </div>

    <div style="width:100%;border:3px solid #000000; padding: 10px 20px 10px 20px">
        <h3>Create Student</h3><p>{{ result_for_cs }}</p>
        <form id="cs_form">
            {% csrf_token %}
            Student ID: <input name="stu_id" type="number" min="1" max="999999999999999">
            Name: <input name="stu_name" type="text">
            Sex: <input type="radio" name="sex" value=0 />男
            <input type="radio" name="sex" value=1 />女
            Department: <input name="depart" type="number" min="1" max="9999">
            Major: <input name="major" type="text">
            Enroll year: <input name="en_year" type="number" min="2000" max="3000">
            Schooling year: <input name="school_year" type="number" min="1" max="8">
            <input id="cs_sub" type="button" value="Create">
        </form>
    </div>

    <!-- <div style="width:100%;border:3px solid #000000; padding: 10px 20px 10px 20px">
        <h3>Create Activity</h3><p>{{ result_for_ca }}</p>
        <form action="/alice/create_activity/" method="post">
            {% csrf_token %}
            Activity name: <input name="act_name" type="text"> <br>
            Introduction: <br> 
            <textarea name="intro" cols="140" rows="3"></textarea> <br>
            Capacity: <input name="capacity" type="number" min="1" max="99999">
            Start date: <input name="start_date" type="text" id="datetimepicker0" data-date-format="yyyy-mm-dd hh:ii">
            End date: <input name="end_date" type="text" id="datetimepicker1" data-date-format="yyyy-mm-dd hh:ii">
            <input type="submit" value="Create">
        </form>
    </div> -->

    <div style="width:100%;border:3px solid #000000; padding: 10px 20px 10px 20px">
        <h3>Create Activity</h3><p>{{ result_for_ca }}</p>
        <form id="ca_form">
            {% csrf_token %}
            Activity name: <input name="act_name" type="text"> <br>
            Introduction: <br> 
            <textarea name="intro" cols="140" rows="3"></textarea> <br>
            Capacity: <input name="capacity" type="number" min="1" max="99999">
            Start date: <input name="start_date" type="text" id="datetimepicker0" data-date-format="yyyy-mm-dd hh:ii">
            End date: <input name="end_date" type="text" id="datetimepicker1" data-date-format="yyyy-mm-dd hh:ii">
            <input id="ca_sub" type="button" value="Create">
        </form>
    </div>

    <div style="width:100%;border:3px solid #000000; padding: 10px 20px 10px 20px">
        <table class="table">
            <h3 style="width: 10%">Activity List</h3>
            <div class="input-group" style="width: 20%">
                <input type="text" class="form-control" placeholder="Search for name of activity">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Search</button>
                </span>
            </div>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <!-- <th>Introduction</th> -->
                    <th>Organizer</th>
                    <th>Create date</th>
                    <th>Capacity</th>
                    <th>Start date</th>
                    <th>End date</th>
                    <th>Option</th>
                </tr>
            </thead>
            <tbody>
                    {% for act in acts_list %}
                        <tr>
                            <td>{{ act.activity_ID }}</td>
                            <td>{{ act.name }}</td>
                            <!-- <td>{{ act.introduction }}</td> -->
                            <td>{% firstof act.organizer.first_name act.organizer.username %}</td>
                            <td>{{ act.create_date }}</td>
                            <td>{{ act.capacity }}</td>
                            <td>{{ act.start_date }}</td>
                            <td>{{ act.end_date }}</td>
                            <td>
                                <a class="btn btn-default btn-xs" href="#" style="margin-top:0">edit</a> 
                                <a class="btn btn-default btn-xs" href="{% url 'alice:delete_activity' act.activity_ID  %}" style="margin-top:0">delete</a>
                            </td>
                        </tr>
                    {% endfor %}
            </tbody>
            
        </table>
    </div>

    <!-- 参与的活动 -->
    <div style="width:100%;border:3px solid #000000; padding: 10px 20px 10px 20px">
        <table class="table">
            <h3 style="width: 10%">Participatory activities list</h3>
            <div class="input-group" style="width: 20%">
                <input type="text" class="form-control" placeholder="Search for name of activity">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Search</button>
                </span>
            </div>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <!-- <th>Introduction</th> -->
                    <th>Organizer</th>
                    <th>Create date</th>
                    <th>Capacity</th>
                    <th>Start date</th>
                    <th>End date</th>
                    <th>Option</th>
                </tr>
            </thead>
            <tbody>
                    {% for act in part_acts_list %}
                        <tr>
                            <td>{{ act.activity_ID }}</td>
                            <td>{{ act.name }}</td>
                            <!-- <td>{{ act.introduction }}</td> -->
                            <td>{% firstof act.organizer.first_name act.organizer.username %}</td>
                            <td>{{ act.create_date }}</td>
                            <td>{{ act.capacity }}</td>
                            <td>{{ act.start_date }}</td>
                            <td>{{ act.end_date }}</td>
                            <td>
                                <a class="btn btn-default btn-xs" href="#" style="margin-top:0">edit</a> 
                                <a class="btn btn-default btn-xs" href="{% url 'alice:delete_activity' act.activity_ID  %}" style="margin-top:0">delete</a>
                            </td>
                        </tr>
                    {% endfor %}
            </tbody>
            
        </table>
    </div>

    <script src="{% static 'alice/javascript/jquery.min.js' %}"></script>
    <script src="{% static 'alice/javascript/bootstrap-datetimepicker.min.js' %}"></script>
    <script type="text/javascript">
        $('#datetimepicker0').datetimepicker();
        $('#datetimepicker1').datetimepicker();
        
        function sub(sub_btn, sub_form, red_url){
            $(sub_btn).click(function() {
                $.ajax({
                    type : 'post',
                    dataType : 'html',
                    url : red_url,
                    data : $(sub_form).serialize(),
                    contentType : "application/x-www-form-urlencoded",
                    success : function(data) {
                        alert(data)
                        location.replace('/alice/index/')
                    }
                })
            })
        }

        sub('#cs_sub', '#cs_form', '/alice/create_student/')
        sub('#ca_sub', '#ca_form', '/alice/create_activity/')
    </script>
    <!-- 标记： form中的type若设为submit，在使用ajax表单提交时会引发二次请求，应设为button -->
</body>
</html>